<template>
	<contents :heightInclude="['tabBar']" class="user_name_page">
		<u-form
			:model="form"
			ref="form"
			label-width="165"
			:label-style="{ paddingRight: '15rpx' }"
		>
			<u-form-item :label="$t('locales.nikeName')" prop="nickName">
				<u-input v-model="form.nickName" :placeholder="$t('locales.inputNikeName')" maxlength="10" />
			</u-form-item>
		</u-form>
		<SubmitBtn @click="submit" />
	</contents>
</template>

<script>
import { updateNickName } from '@/api/http/user'
import SubmitBtn from '@/components/submitBtn'
export default {
	components: {
		SubmitBtn
	},
	data() {
		return {
			form: {
				nickName: ''
			},
			rules: {
				nickName: [
					{
						required: true,
						message: this.$t('locales.inputNikeName'),
						trigger: 'blur'
					},
					{
						min: 2,
						message: this.$t('locales.nikeNameLow'),
						trigger: 'blur'
					}
				]
			}
		}
	},
	onLoad(opt) {
		this.form.nickName = opt.nickName
	},
	onReady() {
		this.$refs.form.setRules(this.rules)
	},
	methods: {
		// 提交注册
		submit() {
			this.$refs.form.validate(valid => {
				if (!valid) return
				updateNickName({
					...this.form
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: res.message
					})
					if (res.code === 200) {
						setTimeout(() => {
							uni.navigateBack()	
						}, 1500)
					}
				})
			})
		}
	}
}
</script>

<style lang="scss">
.user_name_page {
	.u-form {
		padding: 0 30rpx;
		background-color: #fff;
	}
}
</style>
